<template>
  <div class="swiper">
    <div class="swiper-left">
      <el-carousel
        height="420px"
        direction="vertical"
        motion-blur
        :autoplay="true"
        arrow="never"
        indicator-position="none"
      >
        <el-carousel-item v-for="(item, index) in images" :key="index">
          <el-image
            :src="item"
            :preview-src-list="images"
            preview-teleported
            class="swiper-image"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="swiper-right">
      <img
        src="../../../assets/AI.png"
        alt=""
        class="swiper-right-img"
        @click="gotoAI"
      />
      <img src="../../../assets/AI.png" alt="" class="swiper-right-img" />
      <img src="../../../assets/AI.png" alt="" class="swiper-right-img" />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import offerImage from '@/assets/offer.jpg'
import logoImage from '@/assets/logo.png'
import gzhImage2 from '@/assets/gzh.jpg'
import AIImage from '@/assets/AI.png'
import router from '@/router'
// 定义图片数组

const images = ref([offerImage, logoImage, AIImage, gzhImage2])
const gotoAI = () => {
  router.push('/aibot/index')
}
</script>

<style lang="scss" scoped>
.swiper {
  width: 800px;
  height: 420px;
  display: flex;
}
.swiper-left {
  width: 600px;
  height: 420px;
  margin-left: 1rem;
  border-radius: 10px; /* 圆角图片 */
  //   float: left;
  .el-carousel {
    border-radius: 10px; /* 圆角图片 */
  }
  .demonstration {
    color: var(--el-text-color-secondary);
  }

  .swiper-image {
    width: 100%; /* 使图片宽度适应轮播项宽度 */
    height: 100%;
    border-radius: 10px; /* 圆角图片 */
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
.swiper-right {
  //   margin: auto;
  margin-left: 2px;
  width: 130px;
  .swiper-right-img {
    border-radius: 10px;
    width: 180px;
    height: 137px;
    padding: 0;
    cursor: pointer;
  }
}
</style>
